<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  value: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['colSettingChange'])
watch(() => props.value, () => {
  // 当某一列重新显示之后 操作栏布局会乱，在此通知父组件发生改变
  emit('colSettingChange')
}, { deep: true })

const drawerVisible = ref(false)
// 打开列设置
const openColSetting = () => {
  drawerVisible.value = true
}

defineExpose({
  openColSetting,
})
</script>

<template>
  <!-- 列设置 -->
  <el-drawer :visible.sync="drawerVisible" title="列设置" size="500px">
    <div class="table">
      <el-table :data="value" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
        <el-table-column prop="label" align="center" label="列名" />
        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
          <el-switch v-model="scope.row.isShow.value" />
        </el-table-column>
        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
          <el-switch v-model="scope.row.sortable" />
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <div>暂无可配置列</div>
          </div>
        </template>
      </el-table>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.table{
  padding: $margin;
}
</style>
